<template>
	<div class="tamplate2-header-wrap">
		<div class="tamplate2-header-inner-wrap fix">
			<div class="header-name-wrap fl">
				<span class="header-tag" v-if="roompara.room_qualification === '1'">实名</span>
				<span class="header-tag" v-else-if="roompara.room_qualification === '2'">认证</span>
				<span v-if="!speaker" class="teacher-name ell">等待直播</span>
				<span v-else><span style="display: inline-block;max-width: 5.87rem;vertical-align: top;margin-right: 0.31rem;" class="ell">{{speaker}}</span>正在直播中</span>
			</div>
			<div class="real-time-people-wrap fr">
				<span>{{allCount}}</span>人观看
			</div>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		name:'Template2Header',
		inheritAttrs: false,
		computed:{
			...mapGetters([
			  'user',
				'allCount',
				'speaker',
				'roomLive',
				'roompara'
			])
		},
		created(){
			console.log(this.$listeners)
			console.log(this.$attrs)
		}
	}
</script>

<style lang="scss" scoped>
	.tamplate2-header-wrap{
		position: absolute;
		height: 46px;
		line-height: 46px;
		left: 0;
		right: 0;
		z-index: 14;
		color: #fff;
		background-color: rgba(91, 91, 91, 0.4);
		transition: opacity .5s,visibility .5s;
		opacity: 0;
		visibility: hidden;
		.tamplate2-header-inner-wrap{
			padding: 0 1.75rem;
			.header-name-wrap{
				position: absolute;
				font-size: 1rem;
				.header-tag{
					display: inline-block;
					width: 2.43rem;
					height: 1.25rem;
					margin-right: 0.5rem;
					line-height: 1.2rem;
					border-radius: 0.25rem;
					font-size: 0.93rem;
					color: #fff;
					background-color:#FF7900;
					text-align: center;
				}
				.teacher-name{
					display: inline-block;
					max-width: 9.37rem;
					vertical-align: top;
				}
			}
		}
	}
	.tamplate2-header-wrap.active{
		visibility: visible;
		opacity: 1;
	}
</style>
